<script>
	const httpRequest = require("@/common/httpRequest.js")
	import WebSocket from '@/common/websocket.js' //websocket封装
	export default {
		data() {
			return {
				websocket: null,
				yinpinSetall: {}
			}
		},
		globalData: {
			systemBarHeight: 0
		},
		onLaunch: function() {
			this.getplayAudio()
			uni.$on("yuyuetz", data => {
				httpRequest.modal('預約呼叫通知', "請前往櫃檯", false, (resp) => {})
				this.scanAudioyytongzhi()
			})
			uni.$on("qucantz", data => {
				httpRequest.modal('取餐通知', "請到櫃檯取餐", false, (resp) => {})
				this.scanAudioqctongzhi()
			})
		},
		onUnload() {
			uni.$off("yuyuetz")
			uni.$off("qucantz")
			this.websocket.close()
		},
		onShow: function() {
			uni.setLocale('zh-Hant');
			if (httpRequest.checkIsLogin()) { //已經登陆,创建websocket连接
				this.websocketStart()
			}
			// 獲取系統栏高度
			uni.getSystemInfo({
				success: res => {
					this.globalData.systemBarHeight = res.statusBarHeight;
				}
			});
		},
		methods: {
			getplayAudio() {
				httpRequest.request("/api/index/getConfigInfoItem", "POST", {
					pidtype: "yinpinset",
				}).then(res => {
					this.yinpinSetall = res.data
					console.log(this.yinpinSetall);
				})
			},
			// ordergoods=下单提醒  ordermake_add=预约下单   ordercall=呼叫订单  ordermake_join=预约呼叫入座  getfood=取餐
			scanAudioyytongzhi() {
				let music = null
				music = uni.createInnerAudioContext(); //创建播放器对象
				music.sessionCategory = "ambient"
				// music.src = require("@/static/ruzuo.mp3");
				music.src = this.yinpinSetall.ordermake_join
				music.play()
				music.onEnded(() => {
					music = null
				})
			},
			scanAudioqctongzhi() {
				console.log("111111111111111", this.yinpinSetall);
				let music = null
				music = uni.createInnerAudioContext(); //创建播放器对象
				music.sessionCategory = "ambient"
				// music.src = require("@/static/qucan.mp3");
				music.src = this.yinpinSetall.getfood
				music.play()
				music.onEnded(() => {
					music = null
				})
			},
			websocketStart() {
				this.websocket = new WebSocket("wss://useradmin.opos.tw:8282");
				this.websocket.connect()
				this.websocket.onMessage(result => {
					console.log('app.js收到服務器内容：' + result.data);
					uni.$emit('updatechatFn', "")
					uni.$emit('updatechatFnList', "")
				})
			},
		}
	}
</script>
<style lang="scss">
	@import "colorui/main.css";
	@import "colorui/icon.css";
	@import "uview-ui/index.scss";
	@import url("static/main.css");

	.toprightbtn {
		background-color: #FFB800;
		color: #333;
		font-size: 24rpx;
		font-weight: 900;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		letter-spacing: 3rpx;
	}

	.boxshadow {
		box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1);
	}

	.uni-modal__bd {
		color: #333 !important;
	}

	.uni-modal__title {
		color: #00a0e8 !important;
	}

	.lan_text {
		color: #24acf2;
	}

	.dashedline {
		padding-top: 10rpx;
		border-top: 2rpx dashed #333;
	}

	.guigek {
		background-color: #31a3d6;
		color: #fff;
		border-radius: 10rpx;
		padding: 5rpx 10rpx;
		font-size: 20rpx;
	}

	.checkfocus {
		background-color: #ffb800;
		border-radius: 0 20rpx;
		position: absolute;
		top: 0;
		right: 0;
		padding: 5rpx 30rpx;
	}

	.dingwei {
		position: relative;
	}

	.listbtnhuang {
		border-radius: 50rpx;
		padding: 15rpx 30rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
		border: 1rpx solid #FF5C00;
	}

	.xuanzhongs {
		background-image: url("static/images/index/xuanzhong.png");
		width: 30rpx;
		min-width: 30rpx;
		height: 30rpx;
		background-size: 100% 100%;
	}

	.wiexuanzhongs {
		background-image: url("static/images/index/wiexuanzhong.png");
		width: 30rpx;
		min-width: 30rpx;
		height: 30rpx;
		background-size: 100% 100%;
	}

	.right_icon {
		width: 16.35rpx;
		min-width: 16.35rpx;
		height: 23.35rpx;
		background-image: url('static/images/index/right_icon.png');
		background-size: 100% 100%;
	}

	.right_icon_yellow {
		width: 16.35rpx;
		min-width: 16.35rpx;
		height: 23.35rpx;
		background-image: url('static/images/index/right_icon_yellow.png');
		background-size: 100% 100%;
	}

	.deletimg {
		background-image: url("@/static/images/index/delete.png");
		width: 30rpx;
		min-width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 15rpx;
		background-size: 100%, 100%;
		top: 15rpx;
	}

	.shopPhone {
		width: 52rpx;
		height: 52rpx;
	}

	.item_image_box {
		width: 33.33%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
.weikai {
		border-radius: 0 10rpx 0 10rpx;
		background-color: rgba(153, 153, 153, .1);
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999;
		padding: 5rpx 30rpx;
	}
	
	.yikai {
		border-radius: 0 10rpx 0 10rpx;
		background-color: #50a6a3;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		padding: 5rpx 30rpx;
	}
	.weikailist {
		border-radius: 10rpx;
		background-color: rgba(153, 153, 153, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999;
		padding: 5rpx 10rpx;
	}
	.baisebj {
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
		background-color: rgba(255, 184, 0, 0.3);
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 15rpx !important;
		color: #333;
	}
	.huangsebj {
		border-radius: 20rpx 20rpx 0 0;
	}
	.yikailist {
		border-radius: 10rpx;
		background-color: #50a6a3;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #fff;
		padding: 5rpx 10rpx;
	}
	.arrow_top {
		width: 13rpx;
		height: 10rpx;
		background-image: url("@/static/images/index/top.png");
		background-size: 100% 100%;
	}

	.arrow_top_active {
		width: 13rpx;
		height: 10rpx;
		background-image: url("@/static/images/index/top_active.png");
		background-size: 100% 100%;
	}

	.arrow_bottom {
		width: 13rpx;
		height: 10rpx;
		background-image: url("@/static/images/index/bottom.png");
		background-size: 100% 100%;
		margin-top: 5rpx;
	}

	.arrow_bottom_active {
		width: 13rpx;
		height: 10rpx;
		background-image: url("@/static/images/index/bottom_active.png");
		background-size: 100% 100%;
		margin-top: 5rpx;
	}

	.screen {
		width: 16.81rpx;
		height: 22.75rpx;
		background-image: url("@/static/images/index/screen.png");
		background-size: 100% 100%;
	}

	.editImage {
		width: 24rpx;
		height: 28rpx;
	}

	.deleteImage {
		width: 28rpx;
		height: 28rpx;
	}

	.footer {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		background-color: #ffffff;
		padding: 30rpx;

		.footerButton {
			padding: 20rpx;
			border-radius: 41rpx;
			text-align: center;
			background-color: rgba(255, 184, 0, 1);
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
	}

	.greyBtn {
		padding: 10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(102, 102, 102, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.orangeBtn {
		padding: 10rpx 30rpx;
		text-align: center;
		border: 2rpx solid rgba(255, 92, 0, 1);
		border-radius: 120rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF5C00;
	}

	.content {
		background-color: #FAFAFA;
		// background-color: #fde7e7;
		min-height: calc(100vh - 88rpx);
		box-sizing: border-box;
	}

	.positionr {
		position: relative;
	}

	.inline_block {
		display: inline-block;
	}

	.flex1 {
		flex: 1;
	}

	.width0 {
		width: 0;
	}

	.flex {
		display: flex;
	}

	.flextop {
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}

	.flextops {
		display: flex;
		align-items: flex-start;
	}

	.flexcenter {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flexcolumn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.flexbottom {
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	.flexbetween {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flexleft {
		display: flex;
		align-items: center;
	}

	::v-deep.u-number-box__minus {
		background-color: #EC7AA0 !important;
	}

	::v-deep.u-number-box__plus {
		background-color: #EC7AA0 !important;
	}

	.smalltext {
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.flexright {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.flexaround {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.flexstart {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.text {
		text-align: center;
	}

	.textleft {
		text-align: left;
	}

	.textright {
		text-align: right;
	}

	.justify_between {
		display: flex;
		justify-content: space-between;
	}

	.justify_between_column {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.flex_wrap {
		flex-wrap: wrap;
	}

	.ffffff {
		background-color: #ffffff;
	}

	.fafafa {
		background-color: #FAFAFA;
	}

	.f7f7f7 {
		background-color: #F7F7F7;
	}

	.line_bottom {
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
	}

	.line_top {
		border-top: 2rpx solid rgba(0, 0, 0, 0.05);
	}

	.line_b {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.03);
	}

	.line_b9 {
		border-bottom: 2rpx solid rgba(153, 153, 153, 0.3);
	}

	.line_t {
		border-top: 1rpx solid RGBA(242, 242, 242, 1);
	}

	.border_bottom {
		border-bottom: 1rpx solid #F3F3F3;
	}

	.inp {
		text-align: right;
		color: #000000;

	}

	/* margin*/
	.margin {
		margin: 30rpx 30rpx;
	}

	.margin_top1 {
		margin-top: 10rpx;
	}

	.margin_top2 {
		margin-top: 20rpx;
	}

	.margin_top {
		margin-top: 30rpx;
	}

	.margin_top4 {
		margin-top: 40rpx;
	}

	.margin_top5 {
		margin-top: 50rpx;
	}

	.margin_top6 {
		margin-top: 60rpx;
	}

	.margin_top7 {
		margin-top: 70rpx;
	}

	.margin_left1 {
		margin-left: 10rpx;
	}

	.margin_left2 {
		margin-left: 20rpx;
	}

	.margin_left3 {
		margin-left: 30rpx;
	}

	.margin_left4 {
		margin-left: 40rpx;
	}

	.margin_left5 {
		margin-left: 50rpx;
	}

	.margin_left6 {
		margin-left: 60rpx;
	}

	.margin_left7 {
		margin-left: 70rpx;
	}

	.margin_right1 {
		margin-right: 10rpx;
	}

	.margin_right2 {
		margin-right: 20rpx;
	}

	.margin_right3 {
		margin-right: 30rpx;
	}

	.margin_right4 {
		margin-right: 40rpx;
	}

	.margin_right5 {
		margin-right: 50rpx;
	}

	.margin_right6 {
		margin-right: 60rpx;
	}

	.margin_right7 {
		margin-right: 70rpx;
	}

	.margin_bottom1 {
		margin-bottom: 10rpx;
	}

	.margin_bottom2 {
		margin-bottom: 20rpx;
	}

	.margin_bottom3 {
		margin-bottom: 30rpx;
	}

	.margin_bottom4 {
		margin-bottom: 40rpx;
	}

	.margin_bottom5 {
		margin-bottom: 50rpx;
	}

	.margin_bottom6 {
		margin-bottom: 60rpx;
	}


	/*  padding*/
	.mainpadding {
		padding: 30rpx 30rpx;
	}

	.paddinglr {
		padding: 0 30rpx;
	}

	.paddinglr15 {
		padding: 0 15rpx;
	}

	.paddingtb {
		padding: 30rpx 0;
	}

	.padding15 {
		padding: 15rpx;
	}

	.padding_top1 {
		padding-top: 10rpx;
	}

	.padding_top2 {
		padding-top: 20rpx;
	}

	.padding_top3 {
		padding-top: 30rpx;
	}

	.padding_top15 {
		padding-top: 15rpx;
	}

	.padding_left3 {
		padding-left: 30rpx;
	}

	.padding_left2 {
		padding-left: 20rpx;
	}

	.padding_left1 {
		padding-left: 10rpx;
	}

	.padding_right3 {
		padding-left: 30rpx;
	}

	.padding_right2 {
		padding-left: 20rpx;
	}

	.padding_right1 {
		margin-left: 10rpx;
	}

	.padding2 {
		padding: 26rpx;
	}

	.padding_lr {
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.padding_bottom {
		padding-bottom: 30rpx;
	}

	.padding_lrb {
		padding: 0rpx 30rpx 30rpx 30rpx;
	}

	.white_nowrap {
		white-space: nowrap;
	}

	.word_wrap {
		word-wrap: break-word;
		word-break: break-all;
	}

	//超出一行省略號
	.yihang {
		overflow: hidden;
		white-space: nowrap;
		// -webkit-line-clamp: 1;
		text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
	}

	//超出两行省略號
	.lianghang {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	/* 字体 */
	.text_a {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.text_g {
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.text_pee {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.text_b {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.text_five {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.text_blod {
		font-size: 32rpx;
		font-family: DIN-Bold, DIN;
		font-weight: bold;
	}

	.saleLableclass {
		padding: 5rpx 30rpx;
		background: rgba(255, 133, 5, 0.1);
		border-radius: 0rpx 14rpx 0rpx 14rpx;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
	}

	.shanghuax {
		border-top: 2rpx dashed #333;
	}

	.text_d {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.text_h {
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.text_j {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.text_w {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.text_x {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.text_six {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.text_z {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 400;
	}

	.text_weight {
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.text_c {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
	}

	.text_orange {
		font-size: 22rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD3850;
	}

	.text_e {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.text_f {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.text_big {
		font-size: 68rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
	}

	.text_shi {
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	/* 颜色 */
	.color_fff {
		color: #ffff;
	}

	// 主題色
	.color_theme {
		color: #FF8505;
	}

	.xiaolan {
		color: #31a3d6;
	}


	.color_red {
		color: #FF0000;
	}

	.color_orange {
		color: #FF5C00;
	}

	.color_yellow {
		color: #FFB800;
	}

	.color_green {
		color: #0EB500;
	}

	.color_ling {
		color: #000000;
	}

	.color_san {
		color: #333333;
	}

	.color_six {
		color: #666666;
	}

	.color_jiu {
		color: #999999;
	}

	.radius {
		border-radius: 7rpx 7rpx 7rpx 7rpx;
	}

	.radius1 {
		border-radius: 6rpx 6rpx 6rpx 6rpx;
	}

	.border {
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.border1 {
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}

	.border12 {
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.border2 {
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.lanlable {
		background-color: #31a3d6;
		border-radius: 50rpx;
		color: #fff;
		padding: 5rpx 15rpx;
	}
</style>